<template>
	<up-popup :show="show" :round="10" mode="bottom" @close="handleClose" :safeAreaInsetTop="true"
		closeable>
		<view style="padding: 20rpx;">
			<view style="font-weight: bold;font-size: 34rpx;">
				{{ productData?.pname || '' }}
			</view>

			<!-- 业务属性 -->
			<view style="margin-top: 20rpx;">
				<view style="color:#9c9aa5">业务属性</view>
				<view style="display: flex;width: 100%;margin-top: 10rpx;">
					<up-button @click="b_type = '0元赠'" :customStyle="{height:'64rpx',color:'#000'}"
						color="#d8d8d8" text="0元赠" :plain="b_type!='0元赠'" />
					<up-button @click="b_type = '兑奖'"
						:customStyle="{height:'64rpx',marginLeft:'10rpx',color:'#000'}"
						color="#d8d8d8" text="兑奖" :plain="b_type!='兑奖'" />
					<up-button @click="b_type = '销售换货'"
						:customStyle="{height:'64rpx',marginLeft:'10rpx',color:'#000'}"
						color="#d8d8d8" text="销售换货" :plain="b_type!='销售换货'" />
				</view>
			</view>

			<!-- 单位 -->
			<view style="margin-top: 20rpx;">
				<view style="color:#9c9aa5">单位</view>
				<view style="display: flex;width: 100%;margin-top: 10rpx;">
					<up-button v-for="(item,index) in productData?.unitList || []" :key="index"
						@click="u_type = item"
						:customStyle="{height:'64rpx',color:'#000',marginLeft:index!=0?'10rpx':'0'}"
						color="#d8d8d8" :text="item" :plain="u_type!=item" />
				</view>
			</view>

			<!-- 单价 -->
			<view style="margin-top: 20rpx;" v-show="b_type == '销售换货' || b_type == '兑奖'">
				<view style="color:#9c9aa5">单价</view>
				<view style="display: flex;width: 100%;margin-top: 10rpx;">
					<up-input placeholder="" type="number" v-model="unit_price">
						<template #prefix>
							<up-text text="¥" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</view>
			</view>

			<!-- 确定按钮 -->
			<view style="margin-top: 20rpx;">
				<up-button type="primary" @click="handleConfirm">确定</up-button>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, watch } from 'vue'

	// Props
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		productData: {
			type: Object,
			default: () => ({})
		}
	})

	// Emits
	const emit = defineEmits(['close', 'confirm'])

	// 业务类型
	const b_type = ref("0元赠")
	// 单位
	const u_type = ref("箱")
	// 单价
	const unit_price = ref(null)


	// 监听产品数据变化，确保单位选择正确初始化
	watch(() => props.productData, (newData, oldData) => {
		console.log('产品数据变化:', {
			old: oldData?.pname,
			new: newData?.pname,
			itemList: newData?.itemList
		})

		if (newData && newData.unitList && newData.unitList.length > 0) {
			// 重置
			u_type.value = newData.itemList[2].unit
			b_type.value = newData.itemList[2].saletype
			unit_price.value = newData.itemList[2].unitprice === 0 ? null : newData.itemList[2]
				.unitprice
		}
	}, { immediate: true, deep: true })

	// 重置弹窗数据
	const resetPopup = () => {
		b_type.value = "0元赠"
		u_type.value = "箱"
		unit_price.value = null
	}

	// 关闭弹窗
	const handleClose = () => {
		emit('close')
	}

	// 确认配置
	const handleConfirm = () => {
		const configData = {
			businessType: b_type.value,
			unit: u_type.value,
			unitPrice: unit_price.value ? unit_price.value : 0
		}

		emit('confirm', configData)
		handleClose()
	}
</script>

<style lang="scss" scoped>
	// 如果需要额外样式可以在这里添加
</style>